"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  UserCheck,
  Star,
  Calendar,
  Clock,
  MessageSquare,
  Video,
  Award,
  Building2,
  TrendingUp,
  DollarSign,
  Users,
} from "lucide-react"
import { useState } from "react"

interface ExpertConsultationProps {
  onClose: () => void
  user: any
}

export function ExpertConsultation({ onClose, user }: ExpertConsultationProps) {
  const [selectedExpert, setSelectedExpert] = useState(null)
  const [consultationType, setConsultationType] = useState("")
  const [consultationDate, setConsultationDate] = useState("")
  const [consultationTime, setConsultationTime] = useState("")
  const [consultationTopic, setConsultationTopic] = useState("")
  const [consultationDescription, setConsultationDescription] = useState("")

  // 模拟专家数据
  const experts = [
    {
      id: 1,
      name: "张明华",
      title: "连续创业者 & 天使投资人",
      avatar: "/placeholder.svg?height=80&width=80",
      rating: 4.9,
      reviews: 156,
      experience: "15年创业经验，3次成功退出",
      specialties: ["商业模式", "融资策略", "团队管理"],
      companies: ["阿里巴巴", "腾讯", "字节跳动"],
      price: 1000,
      availability: "本周可约",
      description: "曾创立3家公司并成功退出，总估值超过50亿。现为多家知名VC合伙人，专注早期项目投资。",
      achievements: ["创立的公司累计融资超过10亿", "投资项目成功率85%", "帮助100+创业者成功融资"],
    },
    {
      id: 2,
      name: "李小雨",
      title: "营销专家 & 品牌顾问",
      avatar: "/placeholder.svg?height=80&width=80",
      rating: 4.8,
      reviews: 89,
      experience: "12年营销经验，服务500+品牌",
      specialties: ["品牌营销", "增长策略", "用户运营"],
      companies: ["宝洁", "联合利华", "小红书"],
      price: 800,
      availability: "明天可约",
      description: "前宝洁品牌总监，小红书增长负责人。擅长0-1品牌打造和用户增长策略。",
      achievements: ["操盘过10个亿级品牌", "单项目最高ROI达到1:15", "培养营销人才200+"],
    },
    {
      id: 3,
      name: "王建国",
      title: "技术专家 & CTO",
      avatar: "/placeholder.svg?height=80&width=80",
      rating: 4.7,
      reviews: 67,
      experience: "18年技术经验，AI领域专家",
      specialties: ["技术架构", "AI应用", "产品开发"],
      companies: ["百度", "美团", "滴滴"],
      price: 1200,
      availability: "下周可约",
      description: "前百度AI实验室负责人，美团技术VP。在AI、大数据、云计算领域有深厚积累。",
      achievements: ["主导开发过DAU过亿的产品", "拥有AI相关专利50+", "技术团队管理经验1000+"],
    },
    {
      id: 4,
      name: "陈财务",
      title: "财务专家 & CFO",
      avatar: "/placeholder.svg?height=80&width=80",
      rating: 4.9,
      reviews: 123,
      experience: "20年财务经验，IPO专家",
      specialties: ["财务规划", "IPO上市", "投资分析"],
      companies: ["德勤", "普华永道", "小米"],
      price: 1500,
      availability: "本周可约",
      description: "前德勤合伙人，小米CFO。帮助20+公司成功IPO，融资总额超过500亿。",
      achievements: ["操盘IPO项目20+", "融资成功率95%", "财务合规零事故"],
    },
  ]

  const consultationTypes = [
    { value: "business-model", label: "商业模式咨询", icon: Building2 },
    { value: "funding", label: "融资策略", icon: DollarSign },
    { value: "marketing", label: "营销推广", icon: TrendingUp },
    { value: "team", label: "团队管理", icon: Users },
    { value: "product", label: "产品开发", icon: Star },
    { value: "other", label: "其他问题", icon: MessageSquare },
  ]

  const timeSlots = ["09:00", "10:00", "11:00", "14:00", "15:00", "16:00", "17:00", "19:00", "20:00"]

  const handleBookConsultation = () => {
    if (!user) {
      alert("请先登录")
      return
    }

    if (!selectedExpert || !consultationType || !consultationDate || !consultationTime || !consultationTopic) {
      alert("请填写完整信息")
      return
    }

    // 模拟预约成功
    alert(
      `预约成功！\n专家：${selectedExpert.name}\n时间：${consultationDate} ${consultationTime}\n主题：${consultationTopic}`,
    )
    onClose()
  }

  return (
    <Dialog open={true} onOpenChange={onClose}>
      <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="flex items-center space-x-2">
            <UserCheck className="w-5 h-5" />
            <span>专家咨询预约</span>
          </DialogTitle>
        </DialogHeader>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* 专家列表 */}
          <div className="lg:col-span-2 space-y-4">
            <h3 className="text-lg font-semibold">选择专家</h3>
            {experts.map((expert) => (
              <Card
                key={expert.id}
                className={`cursor-pointer transition-all duration-200 ${
                  selectedExpert?.id === expert.id ? "ring-2 ring-blue-500 bg-blue-50" : "hover:shadow-md"
                }`}
                onClick={() => setSelectedExpert(expert)}
              >
                <CardContent className="p-6">
                  <div className="flex space-x-4">
                    <Avatar className="w-16 h-16">
                      <AvatarImage src={expert.avatar || "/placeholder.svg"} />
                      <AvatarFallback>{expert.name[0]}</AvatarFallback>
                    </Avatar>
                    <div className="flex-1">
                      <div className="flex items-start justify-between mb-2">
                        <div>
                          <h4 className="text-lg font-semibold text-slate-900">{expert.name}</h4>
                          <p className="text-slate-600">{expert.title}</p>
                        </div>
                        <div className="text-right">
                          <div className="flex items-center space-x-1 mb-1">
                            <Star className="w-4 h-4 text-yellow-500 fill-current" />
                            <span className="font-medium">{expert.rating}</span>
                            <span className="text-sm text-slate-500">({expert.reviews})</span>
                          </div>
                          <div className="text-lg font-bold text-blue-600">¥{expert.price}/小时</div>
                        </div>
                      </div>

                      <p className="text-sm text-slate-600 mb-3">{expert.description}</p>

                      <div className="grid grid-cols-2 gap-4 mb-3">
                        <div>
                          <span className="text-xs text-slate-500">专业领域</span>
                          <div className="flex flex-wrap gap-1 mt-1">
                            {expert.specialties.map((specialty, index) => (
                              <Badge key={index} variant="outline" className="text-xs">
                                {specialty}
                              </Badge>
                            ))}
                          </div>
                        </div>
                        <div>
                          <span className="text-xs text-slate-500">工作经历</span>
                          <div className="flex flex-wrap gap-1 mt-1">
                            {expert.companies.slice(0, 3).map((company, index) => (
                              <Badge key={index} variant="secondary" className="text-xs">
                                {company}
                              </Badge>
                            ))}
                          </div>
                        </div>
                      </div>

                      <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-4 text-sm text-slate-600">
                          <span>{expert.experience}</span>
                          <Badge className="bg-green-100 text-green-700">{expert.availability}</Badge>
                        </div>
                        <div className="flex space-x-2">
                          <Button variant="outline" size="sm">
                            <MessageSquare className="w-4 h-4 mr-1" />
                            消息
                          </Button>
                          <Button variant="outline" size="sm">
                            <Video className="w-4 h-4 mr-1" />
                            视频
                          </Button>
                        </div>
                      </div>

                      {selectedExpert?.id === expert.id && (
                        <div className="mt-4 p-4 bg-blue-50 rounded-lg">
                          <h5 className="font-medium text-slate-900 mb-2">主要成就</h5>
                          <ul className="space-y-1">
                            {expert.achievements.map((achievement, index) => (
                              <li key={index} className="text-sm text-slate-600 flex items-center space-x-2">
                                <Award className="w-3 h-3 text-blue-600" />
                                <span>{achievement}</span>
                              </li>
                            ))}
                          </ul>
                        </div>
                      )}
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

          {/* 预约表单 */}
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>预约咨询</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                {!user && (
                  <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
                    <p className="text-sm text-yellow-800">请先登录后再预约咨询</p>
                  </div>
                )}

                <div>
                  <label className="text-sm font-medium text-slate-700">咨询类型</label>
                  <Select value={consultationType} onValueChange={setConsultationType}>
                    <SelectTrigger className="mt-1">
                      <SelectValue placeholder="选择咨询类型" />
                    </SelectTrigger>
                    <SelectContent>
                      {consultationTypes.map((type) => {
                        const Icon = type.icon
                        return (
                          <SelectItem key={type.value} value={type.value}>
                            <div className="flex items-center space-x-2">
                              <Icon className="w-4 h-4" />
                              <span>{type.label}</span>
                            </div>
                          </SelectItem>
                        )
                      })}
                    </SelectContent>
                  </Select>
                </div>

                <div>
                  <label className="text-sm font-medium text-slate-700">咨询日期</label>
                  <Input
                    type="date"
                    className="mt-1"
                    value={consultationDate}
                    onChange={(e) => setConsultationDate(e.target.value)}
                    min={new Date().toISOString().split("T")[0]}
                  />
                </div>

                <div>
                  <label className="text-sm font-medium text-slate-700">咨询时间</label>
                  <Select value={consultationTime} onValueChange={setConsultationTime}>
                    <SelectTrigger className="mt-1">
                      <SelectValue placeholder="选择时间段" />
                    </SelectTrigger>
                    <SelectContent>
                      {timeSlots.map((time) => (
                        <SelectItem key={time} value={time}>
                          {time}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                <div>
                  <label className="text-sm font-medium text-slate-700">咨询主题</label>
                  <Input
                    placeholder="简要描述咨询主题"
                    className="mt-1"
                    value={consultationTopic}
                    onChange={(e) => setConsultationTopic(e.target.value)}
                  />
                </div>

                <div>
                  <label className="text-sm font-medium text-slate-700">详细描述</label>
                  <Textarea
                    placeholder="详细描述你的问题和期望得到的帮助..."
                    className="mt-1 min-h-[100px]"
                    value={consultationDescription}
                    onChange={(e) => setConsultationDescription(e.target.value)}
                  />
                </div>

                {selectedExpert && (
                  <div className="p-4 bg-slate-50 rounded-lg">
                    <h5 className="font-medium text-slate-900 mb-2">预约信息</h5>
                    <div className="space-y-1 text-sm text-slate-600">
                      <div>专家：{selectedExpert.name}</div>
                      <div>费用：¥{selectedExpert.price}/小时</div>
                      {consultationDate && consultationTime && (
                        <div>
                          时间：{consultationDate} {consultationTime}
                        </div>
                      )}
                    </div>
                  </div>
                )}

                <Button className="w-full" onClick={handleBookConsultation} disabled={!user || !selectedExpert}>
                  {!user ? "请先登录" : "确认预约"}
                </Button>
              </CardContent>
            </Card>

            {/* 咨询说明 */}
            <Card>
              <CardHeader>
                <CardTitle className="text-base">咨询说明</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3 text-sm text-slate-600">
                <div className="flex items-start space-x-2">
                  <Clock className="w-4 h-4 mt-0.5 text-blue-600" />
                  <span>每次咨询时长为1小时，可根据需要延长</span>
                </div>
                <div className="flex items-start space-x-2">
                  <Video className="w-4 h-4 mt-0.5 text-blue-600" />
                  <span>支持视频通话、语音通话和文字咨询</span>
                </div>
                <div className="flex items-start space-x-2">
                  <Calendar className="w-4 h-4 mt-0.5 text-blue-600" />
                  <span>可提前24小时免费取消或改期</span>
                </div>
                <div className="flex items-start space-x-2">
                  <MessageSquare className="w-4 h-4 mt-0.5 text-blue-600" />
                  <span>咨询后可获得专家的书面建议总结</span>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>

        <div className="flex justify-end mt-6">
          <Button variant="outline" onClick={onClose}>
            关闭
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}
